<template>
  <v-app>
    <v-app-bar color="#2196F3" elevation="0" app dark style="height: 70px">
      <v-toolbar-title>
        <v-avatar tile>
          <v-icon size="50" style="transform: rotate(0deg)">mdi-vuetify</v-icon>

        </v-avatar>
        <!--        Vuetify-Admin-->
      </v-toolbar-title>
      <!--      log文字-->
      <login-text style="height: 100%;width: 280px"/>

    </v-app-bar>
    <v-content>
      <v-container fill-height fluid class="pa-0">

        <v-img class="align-center"  height="865px" src="@/assets/001bg.jpg">

          <v-layout class="justify-center" >
            <v-form>
              <v-card
                  max-width="100%"
                  color="blue darken-2"
                  width="320"
                  align-self-center
                  flat
                  dark
              >
                <v-text-field
                    label="账号"
                    v-model="account"
                    :error-messages="accountErrors"
                    filled
                ></v-text-field>
                <v-text-field
                    :type="showPW?'text':'password'"
                    label="密码"
                    v-model="password"
                    :append-icon="showPW?'mdi-eye':'mdi-eye-off'"
                    :error-messages="passwordErrors"
                    filled
                    @click:append="showPW=!showPW"
                ></v-text-field>
                <v-card-actions class="px-0">
                  <v-btn
                      color="green light-2"
                      depressed
                      block
                      large
                      :loading="loading"
                      @click="submit"
                  >登录
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-form>
          </v-layout>
        </v-img>

      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import {validationMixin} from 'vuelidate'
import {required, maxLength} from 'vuelidate/lib/validators'
import LoginText from "@/views/login/logintext";


export default {
  name: 'LogIn',
  // eslint-disable-next-line vue/no-unused-components
  components: { LoginText,},
  created() {
    // Enter键触发登录事件
    document.onkeydown = (e) => {
      e = window.event || e;
      if (this.$route.path === '/login' && (e.code === 'Enter' || e.code === 'enter')) {
        //调用登录事件方法
        this.submit();
      }
    }
  },
  data() {
    return {
      account: '',    // 账号
      password: '',   // 密码
      showPW: false,  // 是否显示密码
      loading: false,  // 登录中
      snackbar: {
        show: true,
        color: 'grey',
        text: ''
      }
    }
  },
  mixins: [validationMixin],
  validations: {
    account: {required, maxLength: maxLength(30)},
    password: {required}
  },
  computed: {
    accountErrors() {
      const err = [];
      if (!this.$v.account.$dirty) return err;
      !this.$v.account.required && err.push('账号还没填呢')
      !this.$v.account.maxLength && err.push('账号太长了')
      return err
    },
    passwordErrors() {
      const err = [];
      if (!this.$v.password.$dirty) return err;
      !this.$v.password.required && err.push('密码还没填呢')
      return err
    }
  },
  methods: {
    submit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.$router.push('/home')
        }, 500);
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
